<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="../inc/layui/css/layui.css">
  <link rel="stylesheet" href="../css/comm.css" />
</head>

<body>

  <div class="layui-form" id="search-form">
    <div class="flex">

      <div class="layui-form-item">
        <label class="layui-form-label" style="width: auto">客户端类型</label>
        <div class="layui-input-inline">
          <select name="type" id="type" lay-filter="type" lay-filter="type" lay-verify="required">
            <option value="0" selected>请选择</option>
            <option value="1">Android</option>
            <option value="2">IOS</option>
            <option value="3">MiniApp</option>
            <option value="4">Other</option>
          </select>
        </div>
      </div>
      <button class="layui-btn" onclick="search()" style="margin-left: 20px">搜索</button>
      <button class="layui-btn" onclick="reference()" style="margin-left: 20px">刷新</button>
    </div>
  </div>

  <table class="layui-hide" id="table" lay-filter="table"></table>
</body>
<script type="text/javascript" src="../inc/layui/layui.js"></script>
<script type="text/javascript" src="../inc/g.js"></script>
<script type="text/javascript" src="../inc/area.js"></script>
<script type="text/html" id="seeDetail">

</script>
<script type="text/html" id="renderSelect">
  <option value="0" selected>请选择</option>
  <option value="1">Android</option>
  <option value="2">IOS</option>
  <option value="3">MiniApp</option>
  <option value="4">Other</option>
</script>
<script type="text/html" id="submitUpd">
  <div id="form" class="layui-form" style="margin-top: 20px;margin-right: 20px;">
    <div class="layui-form-item">
      <label class="layui-form-label">客户端版本</label>
      <div class="layui-input-block">
        <select name="sysType" lay-filter="sysType" id="sysType" lay-filter="sysType" lay-verify="required">
          <option value="0" selected>请选择</option>
          <option value="1">Android</option>
          <option value="2">IOS</option>
          <option value="3">MiniApp</option>
          <option value="4">Other</option>
        </select>
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">版本号</label>
      <div class="layui-input-block">
        <input class="layui-input " id="versionNum" lay-verify="required" name="versionNum" autocomplete="off"
          placeholder="版本号">
      </div>
    </div>
    <div class="layui-form-item ">
      <label class="layui-form-label ">更新文件</label>
      <div class="layui-input-inline" style="width:400px">
        <button type="button" class="layui-btn" id="uploadimg">上传</button>
        <br><a id="updOk" style="color: green"></a>
        <!-- <input class="layui-input" id="url" name="url" autocomplete="off"  style="margin-top:5px;"/> -->
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">URL</label>
      <div class="layui-input-block">
        <input class="layui-input" id="url" name="url" autocomplete="off"  style="margin-top:5px;"/>
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">更新内容</label>
      <div class="layui-input-block">
        <input class="layui-input" id="content" name="content" autocomplete="off" placeholder="更新内容" />
      </div>
    </div>
    <div class="layui-form-item flex_center">
      <button class="layui-btn layui-btn-danger" lay-submit="" lay-filter="sub">保存</button>
      <button class="layui-btn layui-btn-primary" id="closeform">取消</button>
    </div>
  </div>
  </div>
</script>
<script type="text/html" id="faceTpl">
  <img src="{{Comm.OSS.getImgUrl(d.Face, 's')}}" style="width:30px;height:30px;border-radius:30px; " />
</script>

<script type="text/javascript">
  var clientType = [];
  var sysType = [];
  function initSelect() {
    AJAX.GET('/admin/dict/list', function (d) {
      if (d.code == 1) {
        var data = d.data;
        var clientPid = -1;
        var sysPid = -1;
        for (var i = 0; i < data.length; i++) {
          var item = data[i];
          if (item.dictCode == "clientType") {
            clientPid = item.dictId;
          }
          if (item.dictCode == "sysType") {
            sysPid = item.dictId;
          }
        }
        if (clientPid > 0) {
          for (var i = 0; i < data.length; i++) {
            var item = data[i];
            if (clientPid == item.dictPid) {
              clientType.push(item.dictName);
            }
          }
        }
        if (sysPid > 0) {
          for (var i = 0; i < data.length; i++) {
            var item = data[i];
            if (sysPid == item.dictPid) {
              sysType.push(item.dictName);
            }
          }
        }
      }
    });

  }
  //加载页面
  function pageload() {
    //初始化选择框
    //initSelect();
    layui.extend({
      pca: '../../../inc/layui/lay/pca'
    })
    layui.use(['pca'], function () {
      Comm.pca = layui.pca;
    });
    //初始化列表
    Comm.table.render({
      elem: '#table',
      url: config.root + '/admin/version/list', //列表请求接口
      where: { //接口参数

      },
      cols: [
        [{
          checkbox: true
        },
        {
          field: 'versionId',
          title: 'versionId',
          hide: true
        },
        {
          field: 'versionNum',
          title: '版本号',
          width: 120
        },
        {
          field: 'url',
          title: '地址',
          templet: (d) => {
            var url = d.url;
            if (url && url.indexOf("http") == -1) {
              url = config.ossroot + url;
            }
            return "<a href='" + url + "' style='color: blue;text-align: center' target='_blank'>" + url +
              "</a>"
          }
        },
        {
          field: 'content',
          title: '更新内容'
        },
        {
          field: 'sysType',
          title: '系统类型',
          templet: (d, v) => {
            if (d.sysType == 1) {
              return 'Android';
            }
            if (d.sysType == 2) {
              return 'IOS';
            }
            if (d.sysType == 3) {
              return 'MiniApp';
            }
            return "Other";
          }
        },
        {
          field: 'addTime',
          title: '更新时间',
          templet: (d) => {
            return Comm.format(d.addTime);
          }
        }
        ]
      ],
      limit: 10, //分页大小
      id: 'table',
      page: true, //是否分页
      height: 'full-' + ($(".layui-form").height() + 50), //计算table底部距离
    });

    //监听table列表里按钮点击事件
    Comm.table.on('tool(table)', function (obj) {

    });
  }

  function add() {
    laytpl();
  }

  function update() {
    var d = Comm.table.checkStatus('table'); //获取选中的数据
    if (d.data.length != 1) {
      Comm.msg("请选择一条数据", 5)
      return;
    }
    d = d.data[0];
    laytpl(d);
  }

  function del() {
    var d = Comm.table.checkStatus('table'); //获取选中的数据
    if (d.data.length < 1) {
      Comm.msg("请选择至少一条数据", 5)
      return;
    }
    var ids = [];
    for (var i = 0; i < d.data.length; i++) {
      ids.push(d.data[i].versionId);
    }
    AJAX.POST("/admin/version/delete", {
      versionIds: ids.join(",")
    }, function (d) {
      if (d.code == 1) {
        Comm.layer.closeAll()
        Comm.msg("删除成功", 1);
        Comm.table.reload('table');
      } else {
        layer.closeAll();
        Comm.msg(d.msg, {
          icon: 5
        })
      }
    })
  }

  //刷新
  function reference() {
    Comm.table.reload('table');
  }

  function search() {
    Comm.search();
  }

  function submitUpd(params) {
    if (!params.sysType) {
      Comm.msg("请选择系统类型");
      return;
    }
    var url = "/admin/version/add";
    if (params.versionId) {
      url = "/admin/version/update"
    }

    AJAX.POST(url, params, function (d) {
      if (d.code == 1) {
        //刷新列表
        Comm.table.reload('table');
        Comm.msg("发布成功!", 1);
        layer.closeAll();
      } else {
        Comm.msg("发布失败! [" + d.msg + "]", 5)
      }
    }, true, true)
  }

  function laytpl(d) {
    var url = '';
    if (!d) {
      d = {};
    } else {
      url = d.url;
    }
    Comm.laytpl($("#submitUpd").html()).render(d, function (html) {
      //多窗口模式，层叠置顶
      layer.open({
        type: 1,
        title: "发布更新",
        shade: 0.3,
        area: ['600px', '460px'],
        // maxmin: true,
        content: html,
        //zIndex: layer.zIndex, //重点1
        success: function (layero) {
          //初始化上传控件
          Comm.upload.render({
            elem: '#uploadimg', //绑定元素
            field: 'file',
            accept: 'file',
            acceptMime: 'application/vnd.android.package-archive',
            url: config.ossroot,
            before: function (obj, o) { //obj参数包含的信息，跟 choose回调完全一致，可参见上文。
              //上传loading
              layer.load();
            },
            done: function (d) {
              layer.closeAll('loading'); //关闭loading
              $("#updOk").attr("href", Comm.OSS.getImgUrl(this.data.key))
                .html("已上传，点击下载");
              $("#url").val(this.data.key);
              if (url) {
                $("#urltext").append("<a href='" + this.data.key +
                  "' style='color: blue;' target='_blank'>" + this.data.key + "</a>")
              } else {
                $("#urltext").html("<a href='" + this.data.key +
                  "' style='color: blue;' target='_blank'>" + this.data.key + "</a>")
              }
              layer.msg('上传成功', {
                time: 2000
              });
            },
            error: function () {
              //请求异常回调
              layer.closeAll('loading'); //关闭loading
              layer.msg('上传失败', {
                time: 2000
              });
            }
          });
          //渲染参数
          if (d.url) {
            $("#urltext").html("<a href='" + d.url + "' style='color: blue;' target='_blank'>" + d.url + "</a>")
          }
          if (d.sysType) {
            $("#sysType").find("option[value='" + d.sysType + "']").prop("selected", true);
          }
          Comm.SetData(d, 'form');
          Comm.form.render();
          //监听指定开关
          Comm.form.on('submit(sub)', function (data) {
            if (d) {
              data.field.versionId = d.versionId;
            }
            submitUpd(data.field);
          });
          $("#closeform").click(function () {
            layer.closeAll();
          })
        },
      });
    })
  }
</script>

</html>